<!--系统监控页-->
<script setup>
import {ref, onMounted} from 'vue';
import {useStore} from 'vuex';
import {ElMessage} from 'element-plus';

const store = useStore();
const systemStatus = ref('Unknown');
const performanceMetrics = ref([]);

const fetchSystemStatus = () => {
  store.dispatch('fetchSystemStatus').then(response => {
    systemStatus.value = response.data.status;
    ElMessage.success('系统状态已更新');
  }).catch(() => {
    ElMessage.error('获取系统状态失败');
  });
};

const setupWebSocket = () => {
  const ws = new WebSocket('ws://localhost:8080'); // 替换为您的 WebSocket URL
  ws.onmessage = (event) => {
    const data = JSON.parse(event.data);
    store.commit('UPDATE_PERFORMANCE_METRICS', data);
    ElMessage.success('性能指标已更新');
  };
};

onMounted(() => {
  fetchSystemStatus();
  setupWebSocket();
});
</script>

<template>
  <div class="system-monitor">
    <h1>系统监控</h1>
    <el-card>
      <h2>系统状态</h2>
      <p>Status: {{ systemStatus }}</p>
      <el-table :data="performanceMetrics" style="width: 100%">
        <el-table-column prop="metric" label="指标"/>
        <el-table-column prop="value" label="值"/>
      </el-table>
    </el-card>
  </div>
</template>

<style scoped>
.system-monitor {
  padding: 20px;
}
</style>